<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="webjars/jquery/3.1.1/jquery.min.js"></script>
    <script src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="webjars/bootstrap/3.3.5/css/bootstrap.min.css"/>

    <script src="/webjars/vue/2.1.3/vue.js"></script>
    <script type="text/javascript" src="/jquery.ajax.extend.js"></script>

    <title>mysql</title>




</head>
<body>

<div id="app" class="container" style="margin:10px auto;width: 800px; height: 600px;">

    <form>

        <div class="form-group col-sm-6">
            <label for="name">table name</label>
            <input type="text" class="form-control"
                   v-model="tableName"/>
        </div>
        <div class="form-group col-sm-6">
            <label for="name">注释</label>
            <input type="text" class="form-control"
                   v-model="tableComment"/>
        </div>



        <table class="table table-hover table-striped table-bordered table-sm" style="margin-top: 5px;">
            <thead >
            <tr>
                <th>#</th>
                <th>列</th>
                <th>类型</th>
                <th>注释</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in colsArr">
                <td>{{index+1}}</td>
                <td><input type="text" class="form-control" v-model="item.colName"/>
                </td>
                <td><select class="form-control" v-model="item.colType">
                    <option v-for="ct in colTypeArr" v-bind:value="ct">{{ct}}</option>

                    </select>
                </td>
                <td>
                    <input type="text" class="form-control"
                           v-model="item.colComment"/>
                </td>
                <td>
                    <button type="button" class="btn btn-sm  btn-primary" @click="addOne(index)">添加</button>
                    <button type="button"  class="btn btn-sm btn-danger"  @click="removeIt(index)">删除</button>
                </td>
            </tr>
            </tbody>
        </table>





        <div class="form-group col-sm-12">
            <label for="name">sql scripts</label>
            <textarea class="form-control"  rows="30">{{result}}</textarea>
        </div>



    </form>


</div>

</body>
</html>


<script type="text/javascript">

    $(function () {


        var vm = new Vue({

            el: "#app",
            data: function(){

                return {

                    count: 1,
                    hobbys:"travel,game".split(','),
                    hobby:"3",
                    tableName:'',
                    tableComment:'',

                    myDog:{

                        "name": "Happy Coder",
                        "legs": 4,
                        "tails": 1,
                        "friends": ["Free Code Camp Campers"]
                    },

                    colsArr: [{colName:'aac001',colType:'varchar(255)',colComment:''},],

                    colTypeArr:["int(11)","varchar(255)","decimal(16,4)",'datetime']

                };

            },

            mounted: function () {

            },


            methods: {


                addOne:function (indx) {
                    this.count = this.count + 1;
                    var fmtStr = "000" + this.count;
                    var length = fmtStr.length;
//                    this.colsArr.push({
//                        colType: 'varchar(255)',
//                        colName: 'aac' + fmtStr.substr(length - 3),
//                        colComment: ''
//                    });

                    var obj={
                        colType: 'varchar(255)',
                        colName: 'aac' + fmtStr.substr(length - 3),
                        colComment: ''
                    };
                    this.colsArr.splice(indx+1,0,obj);
//                        this.colsArr.push({colName:'',colType:'',colComment:''});
                },

                removeIt:function (indx) {

                    console.log(indx);
                    this.colsArr.splice(indx,1);

                },
                alertIt:function () {

                    var message = Object.keys(this.myDog);

                    console.log(message);
                    alert(message);
                }

            },


            computed: {
                result:function () {

                    var str="DROP TABLE IF EXISTS `"+this.tableName+"`;\n" +
                        "CREATE TABLE `"+this.tableName+"` (\n" +
                        "  `sid` int(11) NOT NULL AUTO_INCREMENT ,\n" ;

                    if(this.colsArr.length>0){

                        this.colsArr.forEach(function (ele) {

                            str+="  `"+ele.colName.replace(/[A-Z]/g, function(ch) {return '_'+String.fromCharCode(ch.charCodeAt(0) | 32);})+"` "+ele.colType+" DEFAULT NULL COMMENT '"+ele.colComment+"',\n ";

                        });

                    }

//                            "  `calc_mode` varchar(255) DEFAULT NULL COMMENT '计算方式',\n" +
//                            "  `cycle_use_fee_rate` decimal(16,4) DEFAULT NULL COMMENT '循环使用费率',\n" +
//                            "  `end_date` date DEFAULT NULL COMMENT '截止日期',\n" +
//                            "  `fee_sum` decimal(16,4) DEFAULT NULL COMMENT '小时循环使用费合计',\n" +
//                            "  `hour_use_fee` decimal(16,2) DEFAULT NULL COMMENT '小时使用费',\n" +
//                            "  `month_use_cycle` decimal(16,4) DEFAULT NULL COMMENT '本月使用循环',\n" +
//                            "  `month_use_hour` decimal(16,4) DEFAULT NULL COMMENT '本月使用时间',\n" +
//                            "  `motor_sn` varchar(255) DEFAULT NULL COMMENT '发动机序号',\n" +
//                            "  `pay_date_str` varchar(255) DEFAULT NULL COMMENT '支付日期',\n" +
//                            "  `period` varchar(255) DEFAULT NULL COMMENT '期数',\n" +
//                            "  `real_hour_cycle_ratio` decimal(16,4) DEFAULT NULL COMMENT '实际小时循环使用比率',\n" +
//                            "  `reduction_ratio` decimal(16,4) DEFAULT NULL COMMENT '减推比',\n" +
//                            "  `start_date` date DEFAULT NULL COMMENT '开始日期',\n" +
                    str+=  "  PRIMARY KEY (`sid`)\n" +
                        ") ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='"+this.tableComment+"';";
//                        console.log(this.colsArr);
                    return str;

                }
            },


        });
    });


</script>